<!--
 * @FilePath     : /study_code/layui/15-79.html
 * @Description  : 批量操作已渲染实例
 * @Date         : 2025-02-25 09:54
 * @Author       : Fang YingGui
 * @LastEditors  : fangyinggui 18715384437@163.com
 * @LastEditTime : 2025-04-09 17:14:04
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>documentName</title>
    <link rel="stylesheet" href="" />
  </head>
  <body>
    <!-- 1、这里设置3个容器，用于渲染3个下拉选。 -->

    <div id="demo1" class="xm-select-demo"></div>
    <div id="demo2" class="xm-select-demo"></div>
    <div id="xm3" class="xm-select-demo"></div>

    <!-- 2、一组按钮，用于触发 get 方法 -->
    <div><button class="btn" id="btn1">按钮1：batch 批量禁用</button></div>
    <div><button class="btn" id="btn2">按钮2：batch 批量启用</button></div>
    <div><button class="btn" id="btn3">按钮3：batch 批量触发警告</button></div>
    <div><button class="btn" id="btn4">按钮4：get(过滤方法)</button></div>

    <!-- 显示代码 -->
    <pre id="demo-value"></pre>

    <script src="/xm-select/dist/xm-select.js"></script>
    <script>
      // 3、使用循环，渲染3个下拉选；
      ;['#demo1', '#demo2', '#xm3'].forEach((el, index) => {
        xmSelect.render({
          el,
          data: [
            { name: '张三', value: 1, selected: true },
            { name: '李四', value: 2 },
            { name: '王五', value: 3, disabled: true },
          ],
        })
      })

      // 4、按钮1事件；
      document.getElementById('btn1').onclick = function () {
        xmSelect.batch('', 'update', {
          disabled: true,
        })
      }

      // 5、按钮2事件；
      document.getElementById('btn2').onclick = function () {
        xmSelect.batch('', 'update', {
          disabled: false,
        })
      }

      // 6、按钮3事件；
      document.getElementById('btn3').onclick = function () {
        // 1）正则匹配 demo 开头的下拉容器，筛选出前2个多选；
        // 2）warning 方法有多个参数；（这里设置提示框线颜色为 #f00，true 设置持续显示）
        xmSelect.batch(/demo.*/, 'warning', '#f00', true)
      }

      // 7、按钮4事件；
      document.getElementById('btn3').onclick = function () {
        // 批量获取多选选中值
        var selectArr = xmSelect.batch(null, 'getValue', 'name')
        document.getElementById('demo-value').innerHTML = JSON.stringify(selectArr, null, 2)
      }
    </script>
  </body>
</html>
